<template>
  <div class="box">
    <header></header>
    <div class="attention">
      <div>
        <router-link to="/personal">
          <span class="iconfont iconjiantou2"></span>
        </router-link>
      </div>
      <div>我的关注</div>
    </div>
    <!-- 关注 -->
    <div class="bottom" v-for="(item) in attval" :key="item.id">
      <div class="att">
        <div class="img">
          <img
            v-if="item.head_img"
            :src=" $axios.defaults.baseURL + item.head_img "
            alt
            class="portrait"
          />
          <img v-else src="@/assets/14.png" alt class="portrait" />
          <div class="text">
            <span>{{item.nickname}}</span>
            <br />
            <span>{{item.create_date.split('T')[0]}}</span>
          </div>
        </div>
        <div class="cancel" @click="cancel(item.id)">取消关注</div>
      </div>
    </div>

    <button @click="addFollow(1)">添加关注用户1</button>
    <button @click="addFollow(2)">添加关注用户2</button>
    <button @click="addFollow(3)">添加关注用户3</button>
    <button @click="addFollow(4)">添加关注用户4</button>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      attval: {},
    };
  },
  created() { this.attention() },
  methods: {
    attention() {  //封装数据请求
      this.$axios({
        url: "/user_follows",
        headers: {
          Authorization: "Bearer " + localStorage.getItem("token"),
        },
      }).then((res) => {
        console.log(res);
        if (res.status == "200") {
          this.attval = res.data.data;
          //console.log(this.attval);
        }
      });
    },

    cancel(id) {  //取消关注
      this.$axios({
        url: "/user_unfollow/" + id,
      }).then((res) => {
        console.log(res);
        this.attention()
      });
      console.log(id);
    },

     addFollow(id) {  //添加关注
      this.$axios({
        url: "/user_follows/" + id,
        method: "get"
      }).then(res => {
        console.log(res.data);
        this.attention()
      });
     }
  },
};
</script>

<style lang="less" scoped>
.box {
  font-size: 15/360 * 100vw;
  font-weight: 400;
  background: #f2f2f2;
  width: 100%;
  height: 100%;
  header {
    height: 20/360 * 100vw;
    background-color: #757575;
  }
  .attention {
    display: flex;
    text-align: left;
    margin-bottom: 20/360 * 100vw;
    div {
      line-height: 45/360 * 100vw;
      width: 64%;
      font-size: 13/360 * 100vw;
      font-weight: 700;
    }
    div:nth-child(1) {
      width: 38%;
      padding-left: 15/360 * 100vw;
    }
  }
  .bottom {
    .att {
      display: flex;
      font-size: 13/360 * 100vw;
      padding: 15/360 * 100vw;
      border-bottom: 1px solid #adabab;
      justify-content: space-between;
      .cancel {
        text-align: center;
        width: 70/360 * 100vw;
        font-size: 11/360 * 100vw;
        line-height: 30/360 * 100vw;
        background-color: #e1e1e1;
        border-radius: 15/360 * 100vw;
        color: #949090;
      }
      .img {
        display: flex;
        .portrait {
          width: 35/360 * 100vw;
          height: 35/360 * 100vw;
          background: rgb(163, 162, 161);
          border-radius: 50%;
          margin-right: 10/360 * 100vw;
        }
      }
    }
  }
}
</style>